import React,{ Component } from 'react';
import './perfectCard.scss';
import '../index/index.scss';
import { employeeInfo, editemployeeInfo, areaList, editAvatar, upLoadImg } from 'api/user.js';
import { message } from 'antd';
export default class PerfectCard extends Component{
	constructor (props) {
		super(props)
		this.state={
			userInfo: {},
			mobile: '',
			email: '',
			detail_address: '',
			hiden: '',
			province_id: '',
			province: '请选择省',
			city_id: '',
			city: '请选择市',
			area_id: '',
			area: '请选择区',
			areaList: [],
			district_id: 0,
			color: 'cardActive',
			color1: '',
			color2: '',
			hiden: 'hiden',
			areaInfo: ''
		}
	}
	goBack () { //返回上一级
		this.props.history.goBack()
	}
	handleChange = (e) => {
    let key = e.target.name
    this.setState({[key]: e.target.value})
  }
  _areaList (id) {//获取地址
  	areaList({
  		district_id: id
  	}).then(res => {
  		if (res.code === 1) {
  			this.setState({
  				areaList: res.data
  			})
  		} 
  	})
  }
  _editemployeeInfo () {//编辑用户信息
  	editemployeeInfo({
  		mobile: this.state.mobile,
  		email: this.state.email,
  		province_id: this.state.province_id,
  		city_id: this.state.city_id,
  		area_id: this.state.area_id,
  		detail_address: this.state.detail_address
  	}).then(res => {
  		if(res.code === 1){
				message.success('修改成功！', 3, this.props.history.push(`${window.baseUrl}/user`));
  		} else {
  			message.error(res.message,3);
  		}
  	})
  }
  area (name,par_id,id,leaf) { //点击选择地址
  	if(leaf === 1){
  		this.setState({
  			province_id: id,
  			province: name,
  			color: '',
				color1: 'cardActive',
				color2: '',
				city: '请选择市'
  		},()=>{
  			this._areaList(id)
  		})
  	} else if(leaf === 2){
  		this.setState({
  			city_id: id,
  			city: name,
  			color: '',
				color1: '',
				color2: 'cardActive',
				area: '请选择区'
  		},()=>{
  			this._areaList(id)
  		})
  	} else if(leaf === 3){
  		this.setState({
  			area_id: id,
  			area: name
  		})
  	}
  }
  hiden () {
  	this.setState({
  		hiden: 'hiden',
  		areaInfo: this.state.area === '请选择区' ? this.state.province+this.state.city : this.state.province+this.state.city+this.state.area
  	})
  }
  show () {
  	this.setState({
  		hiden: ''
  	})
  }
  avatarChange (e) {
  	// let that = this
  	const $img = e.target.files[0]
  	let formData = new FormData()
  	formData.append('file', $img)
  	upLoadImg(formData).then(res => {
  		if (res.code === 1) {
  			editAvatar({image_url: res.data.url})
  			this.setState({
  				userInfo: {...this.state.userInfo, employee_img: res.data.url}
  			})
  		}
  	})
  }
	componentWillMount(){
		document.title = '完善名片信息';
		employeeInfo().then(res => { //员工信息
			if (res.code === 1) {
				this.setState({
					userInfo: res.data,
					email: res.data.email,
					mobile: res.data.telephone,
					detail_address: res.data.address,
					province_id: res.data.province_id,
					city_id: res.data.city_id,
					area_id: res.data.area_id
				}, () => {
					areaList({ //省
			  		district_id: 0
			  	}).then(res => {
			  		if (res.code === 1) {
			  			res.data.forEach((value) => {
			  				if( value.district_id === this.state.province_id ){
			  					this.setState({
			  						province: value.district_name
			  					}, () => {
										this.setState({
											areaInfo: this.state.area === '请选择区' ? this.state.province+this.state.city : this.state.province+this.state.city+this.state.area
										})
			  					})
			  				}
			  			})
			  		} 
			  	})
			  	areaList({ //市
			  		district_id: this.state.province_id
			  	}).then(res => {
			  		if (res.code === 1) {
			  			res.data.forEach((value) => {
			  				if( value.district_id === this.state.city_id ){
			  					this.setState({
			  						city: value.district_name
			  					}, () => {
										this.setState({
											areaInfo: this.state.area === '请选择区' ? this.state.province+this.state.city : this.state.province+this.state.city+this.state.area
										})
			  					})
			  				}
			  			})
			  		} 
			  	})
			  	areaList({ //区
			  		district_id: this.state.city_id
			  	}).then(res => {
			  		if (res.code === 1) {
			  			res.data.forEach((value) => {
			  				if( value.district_id === this.state.area_id ){
			  					this.setState({
			  						area: value.district_name
			  					}, () => {
			  						this.setState({
											areaInfo: this.state.area === '请选择区' ? this.state.province+this.state.city : this.state.province+this.state.city+this.state.area
										})
			  					})
			  				}
			  			})
			  		} 
			  	})

				})
			}
		})
		this._areaList(0)
	}
	render(){
		return(
			<div className="perfectCard">
				{/*<div className="title">
					<div onClick={this.goBack.bind(this)}><i className="glyphicon glyphicon-left"></i></div>
					<div>完善名片信息</div>
					<div></div>
				</div>*/}
				<div className="perfectCard_header">
					<div><img src={this.state.userInfo.employee_img} alt='111'/></div>
					<div className="avatar-group">
						<p className="perfectCard_header_logo">修改头像<i className="glyphicon glyphicon-change"></i></p>
						<input type='file' onChange={this.avatarChange.bind(this)} />
						<span>尺寸690*690px</span>
					</div>
				</div>
				<div className="perfectCard_content">
					<div>
						<span>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名 : </span>{this.state.userInfo.employee_name}
					</div>
					<div>
						<span>电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话 : </span><input type="text" name="mobile" onChange={this.handleChange} value={this.state.mobile}/>
					</div>
					<div>
						<span>职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;务 : </span>{this.state.userInfo.position_name}
					</div>
					<div>
						<span>公&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;司 : </span>{this.state.userInfo.company_name}
					</div>
					<div>
						<span>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱 : </span><input type="text" name="email" onChange={this.handleChange} value={this.state.email}/>
					</div>
					<div onClick={this.show.bind(this)}>
						<span>所在地址 : </span>{this.state.areaInfo}
					</div>
					<div>
						<span>详细地址：</span><input type="text" name="detail_address" onChange={this.handleChange} value={this.state.detail_address}/>
					</div>
				</div>
				<div className="perfectCard_button" onClick={this._editemployeeInfo.bind(this)}>保存</div>
				<div className={`perfectCard_area_bg ${this.state.hiden}`}>
					<div className="perfectCard_area">
						<p className="perfectCard_area_title">地址<i className="glyphicon glyphicon-close1" onClick={this.hiden.bind(this)}></i></p>
						<div className="perfectCard_area_info">
							<p className={this.state.color} onClick={this._areaList.bind(this,0)}>{this.state.province}</p>
							<p className={this.state.color1} onClick={this._areaList.bind(this,this.state.province_id)}>{this.state.city}</p>
							<p className={this.state.color2} onClick={this._areaList.bind(this,this.state.city)}>{this.state.area}</p>
						</div>
						<ul className="perfectCard_area_li">
						{
							this.state.areaList.map((item,index) => {
								return(
									<li onClick={this.area.bind(this,item.district_name,item.district_parent_id,item.district_id,item.district_is_leaf)} key={index}>{item.district_name}</li>
								)
							})
						}
						</ul>
					</div>
				</div>
			</div>
		)
	}
}